{% extends "base.html" %}

{% block content %}

  <div class="layui-row layui-col-space10">
    <div class="layui-col-md4">
    </div>
    <div class="layui-col-md4">
      <form class="layui-form" action="" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token()}}"/>
        <input type="hidden" name="id" value="{{user_data.id}}" />
        <h1 style="margin: 50px 0 20px 100px;">个人信息修改</h1>
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-username"></i>
            </div>
            <input type="text" name="username" value="{{user_data.username}}" lay-verify="required" placeholder="username" lay-reqtext="请填写username" autocomplete="off" class="layui-input" id="reg-cellphone">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-email"></i>
            </div>
            <input type="text" name="email" value="{{user_data.email}}" lay-verify="required|email" placeholder="email" lay-reqtext="请填写email" autocomplete="off" class="layui-input" id="reg-cellphone">
          </div>
        </div>
        <div class="layui-form-item">
          <button type="button" class="layui-btn" id="ID-upload-demo-btn">
            <i class="layui-icon layui-icon-upload"></i> 头像上传
          </button>
          <div style="width: 132px;">
            <div class="layui-upload-list">
              <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
              <div id="ID-upload-demo-text"></div>
            </div>
            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
              <div class="layui-progress-bar" lay-percent=""></div>
            </div>
          </div>
          <input type="hidden" name="img_name" value="{{user_data.img_name}}">
        </div>
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input type="password" name="password" value="" lay-verify="" placeholder="如果不修改密码的话请空着" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-wrap">
            <div class="layui-input-prefix">
              <i class="layui-icon layui-icon-password"></i>
            </div>
            <input type="password" name="confirmPassword" value="" lay-verify="confirmPassword" placeholder="如果不修改密码的话请空着" autocomplete="off" class="layui-input" lay-affix="eye">
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label"><h3>自我介绍</h3></label>
          <div class="layui-input-block">
            <textarea name="about_me" placeholder="about_me" class="layui-textarea">{{user_data.about_me}}</textarea>
          </div>
        </div>
        
        <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn" id="formDemo" lay-submit lay-filter="formDemo">save</button>
            </div>
        </div>
      </form>
    </div>
    <div class="layui-col-md4">
    </div>
  </div>


<script>

  var img_path

  layui.use(['form','layer'],function(){

      var form = layui.form;
      var layer = layui.layer;
      var $ = layui.jquery;
      var element = layui.element;
      var upload = layui.upload;

      $('#ID-upload-demo-img').attr('src', '{{user_data.Storage_path}}');
      ///////////////////上传图片///////////////
      var uploadInst = upload.render({
          elem: '#ID-upload-demo-btn',
          url: "{{url_for('edit_profile')}}" // 实际使用时改成您自己的上传接口即可。
          ,method: 'post'  //可选项。HTTP类型，默认post
          ,data: {'csrf_token':"{{ csrf_token()}}"} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
          ,auto: false
          ,bindAction: '#formDemo'
          ,choose: function(obj){
            // 预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
              $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
              file_name = $('input[name=img_name]').attr('value', file.name)
            });
            
            element.progress('filter-demo', '0%'); // 进度条复位
            // layer.msg('上传中', {icon: 16, time: 0});
          },

          done: function(res){

            if(res.code == 200){
              layer.msg(res.msg);
            }else{
              layer.msg(res.msg);
              $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
              return false
            }
            // 上传成功的一些操作
            // …
          },

          error: function(){
            // 演示失败状态，并实现重传
            var demoText = $('#ID-upload-demo-text');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
              uploadInst.upload();
            });
          },
          
          // 进度条
          progress: function(n, elem, e){
            element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
            if(n == 100){
              layer.msg('上传完毕', {icon: 1});
            }
          }
      });
      ///////////////////上传图片///////////////
     
       // 提交事件
       form.on('submit(formDemo)', function(data){
            var field = data.field; // 获取表单字段值

            if(field.password != ''){
              if(field.password != field.confirmPassword){  
                layer.msg("两次输入的密码不一致，请重新输入",{icon:2,time: 1500})
                return false
              }
            }

            // console.log(uploadInst);return false

            $.post("{{url_for('edit_profile')}}",{'username':field.username,'password':field.password,'email':field.email,'about_me':field.about_me,'img_name':field.img_name,'csrf_token':field.csrf_token},function(res){
              // console.log(res);return false
              if(res.code==200){
                layer.msg(res.msg,{icon:1,time: 1500},function(){
                    window.location.href = res.url
                    return false
                })
              }else{
                layer.msg(res.msg,{icon:2,time: 1500})
                return false
              }
            })
            return false; // 阻止默认 form 跳转
        });
  

  })
</script>
{% endblock %}